<template>
  <div>
    <div class="userList">
      <div class="userItem" v-for="item in userList" :key="item.userId">
        <img :src="item.avatarUrl">
        <span class="nickname">{{item.nickname}}</span>
        <p class="desc">{{item.signature}}</p>
      </div>
    </div>
    <paging :totalPages="totalPages" :pagingMethod="getSheetStar" v-show="userList.length>0"></paging>
    <div class="tip" v-show="userList.length===0">暂时没有人收藏</div>
  </div>
</template>

<script>
import {getSheetStarAPI} from '@/api'
import Paging from '@/components/Paging.vue'
export default {
  components: { Paging },
  name:'stars',
  data() {
    return {
      userList:[],  //结果数组
      offset:0,    //偏移数量
      total:0,  //总数
      totalPages:0,  //总页数
    }
  },
  computed:{
    id(){
      return this.$route.query.id;
    },
    main(){
      return this.$store.state.scroll.main;
    }
  },
  methods:{
    // 获取收藏者列表
    async getSheetStar(n){
      this.offset = (n-1)*20;
      const res = await getSheetStarAPI({id:this.id,offset:this.offset});
      if(res.data.code==200){
        this.userList = res.data.subscribers;
        this.total = res.data.total;
        this.totalPages = Math.ceil(this.total/20);
      }else alert('获取收藏者失败');
      if(n!=1) this.main.scrollTo({top:0});
    }
  },
  created(){
    this.getSheetStar(1);
  }
}
</script>

<style lang="less" scoped>
.userList{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.userItem{
  width: 40%;
  margin-bottom: 20px;
  position:relative;
  display: flex;
  img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  .nickname{
    color: #444;
    display: block;
    font-size: 15px;
    line-height: 80px;
    margin-left: 15px;
    cursor: pointer;
  }
  .nickname:hover{
    color: black;
  }
  .desc{
    position: absolute;
    width: 200px;
    font-size: 12px;
    left: 100px;
    bottom: 10px;
    display: block;
    overflow: hidden;   //隐藏
    white-space: nowrap;  //不换行
    text-overflow: ellipsis; //超出部分省略号
  }
}
.tip{
  margin: 100px auto;
  text-align: center;
  color: #ccc;
  font-size: 16px;
}
</style>